Brand & system

Tilplay identity & tokens

Retro-future synthwave, built original. Near-black navy, one sunset gradient, one cyan highlight — everything else is restraint.

Wordmark

Countdown Colon (A) is the chosen wordmark, now live across the mockups — a glowing cyan colon reads as a live clock. B and C stay as alternates. All set in Big Shoulders Display 800.

TIL:PLAY

A · Countdown Colon In use

Glowing cyan colon reads as a live clock — TIL:PLAY. The sunset play tile stays as the companion app icon; the wordmark holds at 16px.

TIL PLAY

B · Triangle apostrophe

The ’til contraction becomes the mark — a pink play glyph where the apostrophe sits. One-color friendly.

TILPLAY

C · Sunset stack

Striped sun disc over a tracked-out wordmark. For posters, merch, loading screens — not nav bars.

App icon & favicon

Countdown colon knocked out of the sunset tile. Shown at 512, 64, 32 and 16 px — the colon holds down to the favicon.

512 · app stores

32 · favicon

16 · tab

Rounded-square tile, corner radius 22.5% of tile size — sunset gradient with a navy #0B0B1A colon. Reads on dark or light; the wordmark keeps the cyan glow.

Social share card

OG template · 1200×630 · rendered per game page with the live day count baked in at crawl time. 80px safe margins.

TIL:PLAY

138 DAYS ’TIL PLAY

AFTERBURN NOV 17, 2026

tilplay.com/g/afterburn

Design tokens

Copy-paste for engineering. Contrast ratios measured against #0B0B1A.

Type

138:04:22

Big Shoulders Display 600–800 · display, countdowns, wordmark. Digits render in fixed-width spans (0.53em) so ticking never shifts.

Space Grotesk 400–700

Body, UI, meta. Scale: 12 · 13 · 14 · 15 · 17 · 20 · 25 body — display clamps 36→170.

Spacing · 4px base

4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96

Radius

4 badge · 6 button · 8 input · 12 card · 16 modal · pill

Shadows & glows

glow-pink on primary CTAs · glow-cyan on focus/highlights · card shadow for elevation. Focus ring: 2px #33E5FF, offset 2.

tokens.css

/* Tilplay design tokens — dark theme only */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* Surfaces */
  --tp-bg-0: #0B0B1A;   /* page */
  --tp-bg-1: #101025;   /* card */
  --tp-bg-2: #12122A;   /* raised card */
  --tp-bg-scrim: rgba(11,11,26,0.85); /* sticky bars, + backdrop-filter: blur(12px) */
  --tp-line-0: #1C1C3D; /* hairline */
  --tp-line-1: #23234A; /* default border */
  --tp-line-2: #2B2B55; /* strong border / chips */

  /* Ink (contrast vs --tp-bg-0) */
  --tp-ink-0: #F4F2FF;  /* primary text · 17.1:1 */
  --tp-ink-1: #A5A2CC;  /* secondary · 7.9:1 */
  --tp-ink-2: #8B87B5;  /* meta/labels · 5.3:1 */
  --tp-ink-3: #4A4680;  /* decorative only — not for text */

  /* Neon */
  --tp-pink:   #FF3D8A; /* 5.0:1 — large text & accents */
  --tp-orange: #FF8A3D; /* 7.6:1 */
  --tp-amber:  #FFC46B;
  --tp-cyan:   #33E5FF; /* 12.6:1 — links, highlights */
  --tp-violet: #8A5CFF;
  --tp-on-neon: #16081A; /* text on gradient fills · AA on both stops */
  --tp-grad-sunset: linear-gradient(90deg, #FF3D8A, #FF8A3D);
  --tp-grad-sunset-v: linear-gradient(180deg, #FFC46B, #FF8A3D 40%, #FF3D8A);

  /* Type */
  --tp-font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --tp-font-body: 'Space Grotesk', system-ui, sans-serif;
  /* Countdown digits: wrap each digit in a fixed-width span —
     display:inline-block; width:0.53em; text-align:center —
     plus font-variant-numeric: tabular-nums. Zero layout shift. */
  --tp-text-12: 12px;  --tp-text-13: 13px;  --tp-text-14: 14px;
  --tp-text-15: 15px;  --tp-text-17: 17px;  --tp-text-20: 20px;
  --tp-text-25: 25px;
  --tp-display-sm: clamp(26px, 3.4vw, 36px);   /* section titles */
  --tp-display-md: clamp(36px, 6vw, 64px);     /* page titles */
  --tp-display-lg: clamp(52px, 9vw, 108px);    /* hero game title */
  --tp-display-xl: clamp(58px, 15vw, 170px);   /* hero countdown */

  /* Spacing — 4px base */
  --tp-space-1: 4px;   --tp-space-2: 8px;   --tp-space-3: 12px;
  --tp-space-4: 16px;  --tp-space-6: 24px;  --tp-space-8: 32px;
  --tp-space-12: 48px; --tp-space-16: 64px; --tp-space-24: 96px;

  /* Radius */
  --tp-radius-badge: 4px;  --tp-radius-btn: 6px;  --tp-radius-input: 8px;
  --tp-radius-card: 12px;  --tp-radius-modal: 16px;  --tp-radius-pill: 999px;

  /* Elevation */
  --tp-glow-pink: 0 0 28px rgba(255,61,138,0.45);
  --tp-glow-pink-hover: 0 0 42px rgba(255,61,138,0.70);
  --tp-glow-cyan: 0 0 24px rgba(51,229,255,0.35);
  --tp-shadow-card: 0 12px 40px rgba(5,5,14,0.55);
  --tp-shadow-bar: 0 -12px 40px rgba(5,5,14,0.60);
  --tp-focus-ring: 0 0 0 2px #0B0B1A, 0 0 0 4px #33E5FF;

  /* Motion */
  --tp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --tp-dur-fast: 150ms;  --tp-dur-base: 220ms;
}

/* Usage rules
   · Backgrounds are --tp-bg-0 everywhere; cards go one step up.
   · One sunset gradient per view (the hero/CTA). Cyan is the only
     other accent — never introduce new hues.
   · Text on gradient fills is always --tp-on-neon, never white.
   · --tp-pink as text: 24px+ (or 19px bold+). Body stays ink-0/1/2.
   · Sticky CTA bar on every page: --tp-bg-scrim + --tp-line-1 top
     border + 2px sunset keyline, content 10px/32px, safe-area pad.
   · Breakpoints: design mobile-first at 390, shift nav/layout ≥820,
     max content width 1240. */

See it applied: Homepage · Game hub · Article · Poster maker